<template>
    <div class="nav-footer">
      <div class="nav-footer-item" :class="path==='/home'? 'active':''" @click="jump('home')">
        <span class="iconfont icon-home"></span>
        <span>首页</span>
        </div>
      <div class="nav-footer-item" :class="path==='/member'? 'active':''" @click="jump('member')">
        <span class="iconfont icon-checkbox-blank-circle-outline"></span>
        <span>会员</span>
        </div>
      <div class="nav-footer-item" :class="path==='/name'? 'active':''"  @click="jump('cart')">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{getcatrnum>0?getcatrnum:''}}</span>
        </div>
      <div class="nav-footer-item" :class="path==='/name'? 'active':''">
        <span class="iconfont icon-weibiaoti2fuzhi12"></span>
        <span>我的</span>
        </div>
    </div>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex'
export default {
  data () {
    return {
      path: this.$route.path,
      Cartlist: []
    }
  },

  components: {},

  computed: {
    // 计算购物车商品总数
    stateNumAll () {
      let totle = 0
      this.Cartlist.map(itme => {
        if (itme.state) {
          totle = itme.cou + totle
        }
      })
      return totle
    },
    ...mapState([

    ]),
    ...mapGetters([
      'getcatrnum'
    ])
  },

  mounted () {
    this.Cartlist = JSON.parse(localStorage.getItem('cartinfo') || '[]')
    this.totlennum()
  },

  methods: {
    jump (name) {
      this.$router.push({name: name})
    },
    ...mapMutations([
      'totlennum'
    ])
  }
}
</script>
<style lang='scss' scoped>
  .nav-footer {
    font-size: 16px;
    display: flex;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;
    .nav-footer-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      .badge {
        position: absolute;
        top: 3%;
        left: 50%;
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background-color: #e4393c;
        text-align: center;
        line-height: 14px;
        color: white;
        font-size: 12px;
      }
    }
  }
  .active {
    color: #26a2ff;
  }
</style>
